/** 仪表盘组件参数 { title // 仪表盘名称 value // 数值 } */
<template>
  <div :id="currentID"></div>
</template>
<script setup lang="ts">
import { BodyOutline } from '@vicons/ionicons5'
import { log } from 'console'
import * as echarts from 'echarts'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  value: {
    type: Number,
    default: 0.5,
  },
})

const currentID = computed(() => {
  return `echartsBox${Math.random()}`
})

const initEcharts = () => {
  const myChart = echarts.init(document.getElementById(currentID.value) as HTMLElement)
  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.25, '#FF6E76'],
              [0.5, '#FDDD60'],
              [0.75, '#58D9F9'],
              [1, '#7CFFB2'],
            ],
          },
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 10,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto',
          },
        },
        axisTick: {
          length: 8,
          lineStyle: {
            color: 'auto',
            width: 2,
          },
        },

        axisLabel: {
          show: false,
          color: '#464646',
          fontSize: 20,
          distance: -60,
          formatter: function (value: any) {
            if (value === 0.875) {
              return 'A'
            } else if (value === 0.625) {
              return 'B'
            } else if (value === 0.375) {
              return 'C'
            } else if (value === 0.125) {
              return 'D'
            }
            return ''
          },
        },
        title: {
          offsetCenter: [10, '40%'],
          fontSize: 18,
          fontWeight: 'bold',
          color: '#fff',
        },
        detail: {
          fontSize: 28,
          offsetCenter: [0, '0%'],
          valueAnimation: true,
          formatter: function (value: any) {
            return Math.round(value * 100) + '%'
          },
          color: 'auto',
        },
        data: [
          {
            value: props.value,
            name: props.title,
          },
        ],
      },
    ],
  }
  myChart.setOption(option)
}
onMounted(() => {
  initEcharts()
})
</script>
<style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
}
</style>
